<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>axios基本使用</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.1.3/axios.min.js"></script>
  </head>
  <body>
    <button>点击发送 GET 请求</button>
    <button>点击发送 POST 请求</button>
    <button>点击发送 PUT 请求</button>
    <button>点击发送 PATCH 请求</button>
    <button>点击发送 DELETE 请求</button>
    <script>
      //绑定事件
      let btns = document.querySelectorAll("button");

      //第一个按钮绑定事件
      btns[0].onclick = function () {
        //发送请求  获取书籍信息
        axios({
          //设置请求的方法
          method: "get",
          //url
          url: "http://127.0.0.1:3000/book", //
          //设置查询字符串   常用 常用 常用
          params: {
            q: "水",
          },
        }).then(
          (response) => {
            console.log(response);
          },
          (error) => {
            console.log(error);
          }
        );
      };

      //第二个按钮
      btns[1].onclick = async function () {
        try {
          //发送请求  获取书籍信息
          let response = await axios({
            //设置请求的方法
            method: "post",
            //url
            url: "http://127.0.0.1:3000/book", //
            //设置请求体的数据
            data: {
              title: "射雕英雄传",
              price: 9.9,
            },
          });
          console.log(response);
        } catch (e) {
          console.log(e);
        }
      };

      //第三个按钮
      btns[2].onclick = async function () {
        try {
          //发送请求  获取书籍信息
          let response = await axios({
            //设置请求的方法
            method: "put",
            //url
            url: "http://127.0.0.1:3000/book/6", //
            //设置请求体的数据
            data: {
              title: "降龙十八掌",
            },
          });
          console.log(response);
        } catch (e) {
          console.log(e);
        }
      };

      //第四个按钮
      btns[3].onclick = async function () {
        try {
          //发送请求  获取书籍信息
          let response = await axios({
            //设置请求的方法
            method: "patch",
            //url
            url: "http://127.0.0.1:3000/book/6", //
            //设置请求体的数据
            data: {
              title: "降龙十八掌",
            },
          });
          console.log(response);
        } catch (e) {
          console.log(e);
        }
      };

      //第五个按钮
      btns[4].onclick = async function () {
        try {
          //发送请求  获取书籍信息
          let response = await axios({
            //设置请求的方法
            method: "delete",
            //url
            url: "http://127.0.0.1:3000/book/6", //
          });
          console.log(response);
        } catch (e) {
          console.log(e);
        }
      };
    </script>
  </body>
</html>
